<template>
    <!-- 二维码容器 -->
    <div class="simple-qrcode">
      <div>
        <img 
        :src="qrcodeUrl" 
        :alt="content" 
        class="qrcode-img"
        :style="{ width: `${size}px`, height: `${size}px` }"
      />
      </div>
      <div class="text-center mt10" v-if="isShow">
        <el-link @click="onDown"> 下载 </el-link>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, onMounted, watch } from 'vue';
  import QRCode from 'qrcode';
  
  // 接收外部传入的字符串（必传）
  const props = defineProps<{
    content: string; // 要生成二维码的内容
    size?: number; // 二维码尺寸，默认200px
    isShow: boolean;
  }>();
  
  // 内部状态
  const qrcodeUrl = ref(''); // 二维码base64地址
  const isLoading = ref(true); // 加载状态
  
  // 生成二维码
  const generateQrcode = async () => {
    if (!props.content.trim()) {
      qrcodeUrl.value = '';
      isLoading.value = false;
      return;
    }
  
    try {
      isLoading.value = true;
      // 生成二维码（使用默认配置，仅传入内容和尺寸）
      const url = await QRCode.toDataURL('https://www.szhjjs.com/#/face/' + props.content, {
        width: props.size || 300,
        errorCorrectionLevel: 'M' // 中等容错率
      });
      qrcodeUrl.value = url;
    } catch (error) {
      console.error('二维码生成失败:', error);
      qrcodeUrl.value = '';
    } finally {
      isLoading.value = false;
    }
  };
  
  const onDown = () => {
    if (!qrcodeUrl.value) return;
  
    // 创建一个 a 标签用于下载
    const link = document.createElement('a');
    // 设置图片地址（Base64 直接作为 URL）
    link.href = qrcodeUrl.value;
    // 设置下载文件名（默认 qrcode.png）
    link.download = 'qrcode.png';
    // 触发点击下载
    document.body.appendChild(link);
    link.click();
    // 清理 DOM
    document.body.removeChild(link);
  }
  

  // 初始化生成
  onMounted(generateQrcode);
  
  // 监听内容变化，重新生成
  watch(
    () => props.content,
    () => generateQrcode()
  );

  watch(
    () => props.isShow,
    () => generateQrcode()
  );
  
  // 监听尺寸变化，重新生成
  watch(
    () => props.size,
    () => generateQrcode()
  );
  </script>
  
  <style scoped>
  .qrcode-img {
    object-fit: contain;
  }
  
  .qrcode-skeleton {
    border-radius: 4px;
  }
  </style>